import React, { useState } from 'react'
import Home from '../../components/imageConbox/imageConImg'
import List from '../../components/imageConbox/imageConSucai'
import Login from '../../components/imageConbox/imageConZhi'
import Kefu from '../../components/Customer'
import { Carousel } from 'antd';
import { ZoomInOutlined, InstagramOutlined } from '@ant-design/icons';
import ScrollToTopButton from '../../components/toTop/Index'; // 导入按钮组件
import "./style.css"
type Tab = 'tab11' | 'tab12' | 'tab13';

const Index: React.FC = () => {
  const [activeTab, setActiveTab] = useState<Tab>('tab11');

  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };
  return (
    <div className='iamgeBox'>
      {/* 轮播图 */}
      <Carousel dots={false} arrows autoplay className='lbt' autoplaySpeed={5000} adaptiveHeight>
        <div>
          <img src="https://pub-cdn-oss.chuangkit.com/ad_position/e4866cc9b328491e974dec33ae5df530?imageMogr2%2Fformat%2Fwebp/cgif/35&quot" alt="" />
        </div>
        <div>
          <img src="https://pub-cdn-oss.chuangkit.com/ad_position/b774078df9344a8992983198d4550061?imageMogr2%2Fformat%2Fwebp/cgif/35" alt="" />
        </div>
      </Carousel>
      <div className='inpa'>
        <ZoomInOutlined />
        <input type="text" />
        <InstagramOutlined />
      </div>

      <div className="image-tabs">
        <div className="image-tabs1" onClick={() => handleTabClick('tab11')}>
          <img src="https://img2.baidu.com/it/u=806194272,665795484&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
          <p>图片</p>
        </div>
        <div className="image-tabs1" onClick={() => handleTabClick('tab12')}>
          <img src="https://img1.baidu.com/it/u=3125269975,3680186141&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
          <p>素材</p>
        </div>
        <div className="image-tabs1" onClick={() => handleTabClick('tab13')}>
          <img src="https://img1.baidu.com/it/u=1980153999,2743884045&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
          <p>字体</p>
        </div>
      </div>
      <div className="content">
        {activeTab === 'tab11' && <div><Home></Home></div>}
        {activeTab === 'tab12' && <div><List></List></div>}
        {activeTab === 'tab13' && <div><Login></Login></div>}
      </div>
      <div className=''>
        <h1>内容区域</h1>
        {/* 这里放置大量内容以便滚动 */}
        <ScrollToTopButton />
      </div>
      <Kefu></Kefu>
    </div>
  )
}

export default Index
